<template>
    <el-col :xs="6" :sm="5" :md="4" class="crm-left-menu full-height">
          <el-menu default-active="1-1" :default-openeds="defaultOpeneds" class="full-height clearfix" @open="handleOpen" @close="handleClose">
              <el-submenu index="1" class="display-menu">
                  <template slot="title"><i class="el-icon-message"></i>标签管理</template>
                  <el-menu-item-group>
                      <el-menu-item index="1-1">客户模块</el-menu-item>
                      <el-menu-item index="1-2">成交分析</el-menu-item>
                      <el-menu-item index="1-3">名单查询</el-menu-item>
                  </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="2"><i class="el-icon-menu"></i>标签管理</el-menu-item>
              <el-menu-item index="3"><i class="el-icon-setting"></i>团队业绩</el-menu-item>
          </el-menu>
    </el-col>
</template>

<style lang="scss">
    .crm-left-menu>.el-menu{
        background-color: rgb(251, 252, 255);

    }

    .crm-left-menu>.el-menu>.el-submenu>.el-menu{
        background-color: rgb(244, 246, 251)
    }

</style>
<script>
import {MenuItem, MenuItemGroup, Col, Menu, Submenu, Row} from 'element-ui'

export default {
    data(){
        return {
            defaultOpeneds : ["1","2","3"]
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },

    components: {
        'el-menu-item' : MenuItem,
        'el-menu-item-group' : MenuItemGroup,
        'el-col' : Col,
        'el-menu' : Menu,
        'el-submenu' : Submenu,
        'el-row' : Row
    }
}
</script>
